<template>
    <el-row :gutter="16" justify="center">
      <el-col :span="8">
        <div class="statistic-card">
          <el-statistic :value="50">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                本周累计完成任务
                <el-tooltip
                  effect="dark"
                  content="Number of users who logged into the product in one day"
                  placement="top"
                >
                  <el-icon style="margin-left: 4px" :size="12">
                    <Warning />
                  </el-icon>
                </el-tooltip>
              </div>
            </template>
          </el-statistic>
      
        </div>
      </el-col>
      <el-col :span="8">
        <div class="statistic-card">
          <el-statistic :value="30">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                本周剩余完成任务
                <el-tooltip
                  effect="dark"
                  content="Number of users who logged into the product in one month"
                  placement="top"
                >
                  <el-icon style="margin-left: 4px" :size="12">
                    <Warning />
                  </el-icon>
                </el-tooltip>
              </div>
            </template>
          </el-statistic>
        
        </div>
      </el-col>
      <el-col :span="8">
        <div class="statistic-card">
          <el-statistic :value="20" title="New transactions today">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                本周总任务
              </div>
            </template>
          </el-statistic>
          <div class="statistic-footer">
            <div class="footer-item">
      
              <span class="green">
                16%
                <el-icon>
                  <CaretTop />
                </el-icon>
              </span>
            </div>
          
          </div>
        </div>
      </el-col>

      <el-col :span="8">
        <div class="statistic-card">
          <el-statistic :value="20">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                本周相比上周效率
                <el-tooltip
                  effect="dark"
                  content="Number of users who logged into the product in one day"
                  placement="top"
                >
                  <el-icon style="margin-left: 4px" :size="12">
                    <Warning />
                  </el-icon>
                </el-tooltip>
              </div>
            </template>
          </el-statistic>
          <div class="statistic-footer">
            <div class="footer-item">
             
              <span class="green">
                24%
                <el-icon>
                  <CaretTop />
                </el-icon>
              </span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="statistic-card">
          <el-statistic :value="10">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                本周累计比上周完成
                <el-tooltip
                  effect="dark"
                  content="Number of users who logged into the product in one month"
                  placement="top"
                >
                  <el-icon style="margin-left: 4px" :size="12">
                    <Warning />
                  </el-icon>
                </el-tooltip>
              </div>
            </template>
          </el-statistic>
          <div class="statistic-footer">
            <div class="footer-item">
              <span></span>
              <span class="red">
                12%
                <el-icon>
                  <CaretBottom />
                </el-icon>
              </span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="statistic-card">
          <el-statistic :value="720" title="New transactions today">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                总效率提升
              </div>
            </template>
          </el-statistic>
          <div class="statistic-footer">
            <div class="footer-item">
             
              <span class="green">
                16%
                <el-icon>
                  <CaretTop />
                </el-icon>
              </span>
            </div>
           
          </div>
        </div>
      </el-col>
    </el-row>

    

  </template>
  
  <script  setup>

  </script>
  
  <style scoped lang="less">
  :global(h2#card-usage ~ .example .example-showcase) {
    background-color: var(--el-fill-color) !important;
  }
  

  .el-row{
    border-radius: 25px;
    margin-top: 10px;
    margin-left: 0px;
    margin-right: 0px;
    overflow: hidden;
    background-color: #fff;
    width: 100%;
    height: 100%;
    .el-col{
      transition: all .3s ease;
      
      
        .statistic-card{
          flex-direction: column;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 40px;

          .statistic-footer{
            
            .footer-item{
              display: flex;
   
    
            }
          }
        }
    }
    .el-col:hover{
      transition: all .3s ease;
      background-color: antiquewhite;
    }
  }
  .el-statistic {
    --el-statistic-content-font-size: 28px;
  }
  

  .green {
    color: var(--el-color-success);
  }
  .red {
    color: var(--el-color-error);
  }
  </style>
  